<template>
    <div>
      <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">

            <div class="layui-card" style="margin-bottom: 0">
              <div class="layui-card-header">
                概况地图
                <a href="javascript:;" class="layui-a-tips" style="float:right;color:#009866;" onclick="openLegend();">(显示/隐藏图例)</a>
              </div>
              <div class="layui-card-body mymap">
                <!--&lt;!&ndash;<div id="map" style="width: 100%;">&ndash;&gt;-->
                  <!--&lt;!&ndash;<div id="GH-map-layer"></div>&ndash;&gt;-->
                  <!--&lt;!&ndash;<div id="GH-map-ex"></div>&ndash;&gt;-->
                <!--</div>-->
                <!-- 地图组件 -->
                <my-map
                  :mapCtrlTools="mapCtrlTools"
                  :lyrdata="lyrdata"
                  :mapParams="mapParams"
                  :spatialQueryConditions="spatialQueryConditions"
                  :pn="pn"
                >
                </my-map>
              </div>
            </div>

          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                兴城地区概况
              </div>
              <div class="layui-card-body layui-text layadmin-text">
                <div id="jieshao" style="width: 100%; overflow: auto">
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;兴城市隶属于辽宁省葫芦岛市，地处辽宁省西南，辽东湾西岸，居“辽西走廊”中部。东南部濒临渤海，东北倚热河丘陵，毗邻葫芦岛市龙港区、连山区，西南隔六股河与绥中县相望，西北同建昌县接壤。</p>
                  <br/>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全市总面积2113平方公里，全市辖28个乡、镇、街道，总人口54.3万，其中满族人口最多，占全市总人口的52%。</p>
                  <br/>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;兴城是国家重点风景名胜区、中国优秀旅游城市、中国温泉之城、中国书法之乡、中国泳装名城、辽宁省历史文化名城。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                兴城地区介绍视频
                <a href="javascript:;" class="layui-a-tips more-file" onclick="openVideo();">更多</a>
              </div>
              <div class="layui-card-body">
                <div id="youku" style="width: 100%;">
                  <iframe width="100%" height="100%" src="//player.bilibili.com/player.html?aid=967585675&bvid=BV13p4y1C7sP&cid=173227299&page=1&rel=0&amp;autoplay=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--右侧一列-->
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">
            热点新闻
            <a href="javascript:;" class="layui-a-tips  more-file">更多</a>
          </div>
          <div class="layui-card-body layui-text layadmin-text">
            <ul>
              <li><a href="javascript:;" target="_blank">全省旅游产业推进大会</a></li>
              <li><a href="javascript:;" target="_blank">开创旅游业发展新局面</a></li>
              <li><a href="javascript:;" target="_blank">中国旅游日·优质旅游环保行</a></li>
              <li><a href="javascript:;" target="_blank">我省发布乡村旅游“召集令”</a></li>
              <li><a href="javascript:;" target="_blank">吉林大学2020年度兴城地学教学实习顺利开展</a></li>
            </ul>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-tab layui-tab-brief layadmin-latestData">
            <a class="more-file" onclick="openPic()">更多</a>
            <ul class="layui-tab-title">
              <li class="layui-this">自然资源</li>
              <li class="">人文气息</li>
              <li class="">历史记忆</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <div style="width: 100%;">
                  <div class="layui-carousel" id="lb1">
                    <div carousel-item>
                      <div><img src="../../assets/images/introduce/1.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/2.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/3.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/4.png" class="lb"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-tab-item">
                <div style="width: 100%;">
                  <div class="layui-carousel" id="lb2">
                    <div carousel-item>
                      <div><img src="../../assets/images/introduce/4.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/2.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/3.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/1.png" class="lb"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-tab-item">
                <div style="width: 100%;">
                  <div class="layui-carousel" id="lb3">
                    <div carousel-item>
                      <div><img src="../../assets/images/introduce/2.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/4.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/1.png" class="lb"></div>
                      <div><img src="../../assets/images/introduce/3.png" class="lb"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">
            周边天气情况
          </div>
          <div class="layui-card-body">
            <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=xingcheng&num=20&site=12"></iframe>
          </div>
          <div class="layui-card-body">
            <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=huludao&num=20&site=12"></iframe>
          </div>
          <div class="layui-card-body">
            <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=suizhong&num=20&site=12"></iframe>
          </div>
          <div class="layui-card-body">
            <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=chaoyang&num=20&site=12"></iframe>
          </div>
          <div class="layui-card-body">
            <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=fuxin&num=20&site=12"></iframe>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import MyMap from '@/components/MyMaps/MyMap.vue'
    export default {
      name:'outlook',
      components:{
        MyMap
      },
      data () {
        return {
          pn:'outlook',//parent_name，即告诉子组件，当前父组件是谁，以便响应不同的业务逻辑
          mapCtrlTools: this.MYCONFIG.mapCtrlTools.outlook,
          lyrdata: this.MYCONFIG.layersDataByFilter.outlook,
          mapParams: this.MYCONFIG.mapParams.outlook,
          spatialQueryConditions: this.MYCONFIG.spatialQueryConditions.outlook, //注意改为正式的
        }
      },
      methods: {
      },
      created() {
      },
    }
</script>

<style>
  @import '../../assets/styles/layui.css';
  .mymap{
    height: 500px;
    width: 875px;
  }

  .more-file{
    position: absolute;
    right:22.5px;
    height: 42px;
    width:28px;
    color:#01AAED;
    line-height: 42px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10000;
  }
  body .demo-class .layui-layer-content{
    background:#ffffff;
  }
  .layui-form-checkbox[lay-skin=primary]{
    /*padding:5px;*/
    padding-left: 25px;
    line-height: 20px !important;
  }
  #GH-map-layer{
    position: absolute;
    right: 20px;
    bottom: 15px;
    z-index: 2;
    background-color: #fff;
    overflow-x: auto;
  }

  #GH-map-ex{
    position: absolute !important;
    left: 15px;
    bottom: 15px;
    z-index: 2;
    background-color: #fff;
    /*max-height: 150px;*/
    max-height: 450px;
    overflow: auto;
    display: none;
  }

  #GH-map-ex::-webkit-scrollbar{
    display: none;
  }
</style>
